import { forwardRef } from "preact/compat";
import HistoriesPage from "./HistoriesPage";
import EnginesPage from "./EnginesPage";
import SettingsPage from "./SettingsPage";
import PresetsPage from "./PresetsPage";
import SettingTab from "./SettingTab";
import { stopPropagation } from "../utilities";
import { slideTuning } from "../signals";

const pages = [
  ["设置", <SettingsPage key="0" />],
  ["搜索历史", <HistoriesPage key="1" />],
  ["搜索引擎", <EnginesPage key="2" />],
  ["快捷输入", <PresetsPage key="3" />],
];

const SettingDialog = forwardRef((_property, reference) => (
  <dialog
    class={`modal transition-opacity ${slideTuning.value ? "opacity-[0]" : ""}`}
    ref={reference}
    onTouchStart={stopPropagation}
    onTouchMove={stopPropagation}
    onTouchEnd={stopPropagation}
  >
    <div class="modal-box">
      <div class="tabs tabs-sm tabs-border justify-around">
        {pages.map(([title, page], index) => (
          <SettingTab key={title} title={title} checked={index === 0}>
            {page}
          </SettingTab>
        ))}
      </div>
    </div>
    <form method="dialog" class="modal-backdrop">
      <button>关闭</button>
    </form>
  </dialog>
));

export default SettingDialog;
